<template>
	<div class="card-list">
		<!-- 左侧全部 -->
		<el-card class="box-card">
			<template #header>
				<div class="card-header">
					<div class="header-title">全部</div>
					<el-input v-model="states.allSearchValue" placeholder="名称">
						<template #suffix>
							<img src="@/assets/image/search.png" alt="图标" class="icon-size"
								@click="searchUser('left')" />
						</template>
					</el-input>
				</div>
			</template>
			<div>
				<el-tree ref="treeLeftRef" :data="states.treeData" default-expand-all show-checkbox
					:props="states.treeProps" node-key="id" :filter-node-method="filterNode"
					:default-checked-keys="states.defaultChecked" @check="handleCheckChange" />
			</div>
		</el-card>

		<!-- 右侧已选择的 -->
		<el-card class="box-card">
			<template #header>
				<div class="card-header">
					<div class="header-title">已选：{{ states.hasSelectionSonList.length }}</div>
					<el-input v-model="states.hasSearchValue" placeholder="名称">
						<template #suffix>
							<img src="@/assets/image/search.png" alt="图标" class="icon-size"
								@click="searchUser('right')" />
						</template>
					</el-input>
				</div>
			</template>
			<div>
				<el-tree ref="treeRightRef" :data="states.hasSelectionList" default-expand-all :props="states.treeProps"
					node-key="id" :expand-on-click-node="false" :filter-node-method="filterNode">
					<template #default="{ node, data }">
						<div class="custom-node">
							<span>{{ node.label }}</span>
							<span>
								<img src="@/assets/image/close.png" class="icon-size" @click="removeUser(node, data)" />
							</span>
						</div>
					</template>
				</el-tree>
			</div>
		</el-card>
	</div>
</template>

<script setup lang="ts">
	import { ref, defineExpose, reactive, onMounted } from 'vue'
	//放大镜图标
	// import searchIcon from '@/assets/search.svg?url'
	//叉号图标
	// import closeIcon from '@/assets/close.svg?url'
	import { formatTree } from '@/utils/tool/arrayTotree'

	//左侧树的标识
	const treeLeftRef = ref(null)
	//右侧树的标识
	const treeRightRef = ref(null)

	const states = reactive({
		//树配置
		treeProps: {
			label: 'name',
			children: 'children',
		},
		//全部搜索
		allSearchValue: undefined,
		//已选搜索
		hasSearchValue: undefined,
		//保存已经勾选的数据，包括父节点和子节点
		hasSelectionList: [],
		//保存已经勾选的数据，只保存子节点
		hasSelectionSonList: [],
		//保存不同分支树的节点
		treeIds: [],
		//保存左侧树的数据
		treeData: [],
		//默认勾选数据
		defaultChecked: [],
	})


	//初始化左侧树
	const initTree = () => {
		//查询树的数据
		let data = [{
			id: 1,
			name: '一级 1',
			parentId: '-1',
			children: [{
				id: 4,
				name: '二级 1-1',
				parentId: '1',
				children: [{
					id: 9,
					name: '三级 1-1-1',
					parentId: '4',
				}, {
					id: 10,
					name: '三级 1-1-2',
					parentId: '4',
				}]
			}]
		}, {
			id: 2,
			name: '一级 2',
			parentId: '-1',
			children: [{
				id: 5,
				name: '二级 2-1',
				parentId: '2',
			}, {
				id: 6,
				name: '二级 2-2',
				parentId: '2',
			}]
		}, {
			id: 3,
			name: '一级 3',
			parentId: '-1',
			children: [{
				id: 7,
				name: '二级 3-1',
				parentId: '3',
			}, {
				id: 8,
				name: '二级 3-2',
				parentId: '3',
			}]
		}]
		//数据转换，转换成树形数据
		states.treeData = data

		//默认勾选值
		states.defaultChecked = ['1-2']
		//处理勾选
		handleCheckChange()
	}

	//树勾选处理，获取所有勾选的子集
	const handleCheckChange = () => {
		//获取勾选的子集数据，不包括父级
		states.hasSelectionSonList = treeLeftRef.value.getCheckedNodes(true)
		//获取选中的节点，包括父节点、子节点、半选中节点
		let data = treeLeftRef.value.getCheckedNodes(false, true)
		//为了防止数据里包含子节点数据，这里只取一级数据
		let data2 = data.map(e => {
			return {
				id: e.id,
				name: e.name,
				parentId: e.parentId,
			}
		})
		console.log(data2, 'data-2')
		//将组装的数据转成树形数据，再右侧显示
		states.hasSelectionList = formatTree(data2)
		//  console.log(states.hasSelectionList)
	}

	//查询用户
	const searchUser = (type : string) => {
		if (type == 'left') {
			//左侧树查询
			treeLeftRef.value!.filter(states.allSearchValue)
		} else {
			//右侧树查询
			treeRightRef.value!.filter(states.hasSearchValue)
		}
	}

	//树节点过滤
	const filterNode = (value : string, data : any) => {
		if (!value) return true
		return data.name.includes(value)
	}

	//移出用户
	const removeUser = (node, data) => {
		console.log(node, data)
		//取消左侧树的勾选
		treeLeftRef.value.setChecked(data, false, true)
		//重新更新右侧树
		handleCheckChange()
	}

	//清除数据
	const clearData = () => {
		states.hasSelectionList = []
		states.hasSelectionSonList = []
		states.allSearchValue = undefined
		states.hasSearchValue = undefined
		states.treeIds = []
		states.treeData = []
		states.defaultChecked = []
	}

	//向外暴露属性和方法
	defineExpose({
		initTree,
		clearData,
	})
	onMounted(() => {
		initTree()
		// clearData()
	})
</script>

<style lang="scss" scoped>
	.card-list {
		display: flex;
		justify-content: space-evenly;
		width: 100%;

		.box-card {
			width: 35%;
			height: 500px;

			.header-title {
				padding-bottom: 10px;
			}

			.custom-node {
				display: flex;
				justify-content: space-between;
				width: 100%;
			}
		}
	}

	.icon-size {
		width: 18px;
		height: 18px;
		cursor: pointer;
	}
</style>